<script setup>
import {onBeforeMount, reactive, ref} from "vue";
import {getAllArrangements, getAllResourcesByType, getLateSixFriendsNews} from "@/api/home";
import {ElMessage} from "element-plus";
import {SUCCESS} from "@/core/constants/HttpStatus";
import {useRouter} from "vue-router";
import {Calendar} from "@element-plus/icons-vue";

const router = useRouter();
// 赛事安排
const arrangementList = ref([]);
// 资源学习
const resources = reactive([
  {
    label: "书籍推荐",
    name: "book",
    source: []
  },
  {
    label: "网络资源",
    name: "website",
    source: []
  }
])
const activeName = ref("book");
// 系友风采
const friendList = ref([]);
// 获取页面基本数据
const fetchAllData = async () => {
  try {
    // 赛事安排
    let res = await getAllArrangements();
    if (res.data.code != SUCCESS) {
      throw new Error(res.data.msg);
    }
    // 系友风采
    let res2 = await getLateSixFriendsNews();
    if (res2.data.code != SUCCESS) {
      throw new Error(res2.data.msg);
    }
    console.log(res2)
    // 书籍推荐
    let res3 = await getAllResourcesByType(0);
    if (res3.data.code != SUCCESS) {
      throw new Error(res3.data.msg);
    }
    // 网络资源
    let res4 = await getAllResourcesByType(1);
    if (res4.data.code != SUCCESS) {
      throw new Error(res4.data.msg);
    }
    arrangementList.value = res.data.data || [];
    friendList.value = res2.data.data || [];
    resources[0].source = res3.data.data || [];
    resources[1].source = res4.data.data || [];
  } catch (e) {
    ElMessage.error(e?.message || "数据获取异常");
  }
}
const goOutSite = (url) => {
  window.location.href = url;
}
onBeforeMount(async () => {
  await fetchAllData();
})
</script>

<template>
  <div>
    <div class="topic-header">
      <div class="text">实验室概况</div>
    </div>
    <div class="focus">
      <div class="diagrams">
        <div class="item" v-for="i in 4">
          <div class="chart"></div>
          <div class="info">
            <div class="title">使用率</div>
            <div class="num">200</div>
            <div class="unit">人 / 月</div>
          </div>
        </div>
      </div>
    </div>
    <div class="topic-header">
      <div class="text">系内实况</div>
    </div>
    <div class="section-1 w">
      <div class="double-col">
        <div class="left">
          <el-carousel trigger="click" height="400px">
            <el-carousel-item v-for="item in 4" :key="item">
              <div class="item">
                <img src="../../assets/images/home_background.jpg" alt="">
                <div class="caption">
                  <div class="title">标题</div>
                  <div class="detail">
                    <el-text truncated style="color: white;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Amet consectetur fugit laudantium mollitia non odio odit porro sit. Asperiores consectetur, dolor
                      dolores illum labore libero nesciunt nihil nulla repudiandae sint!
                    </el-text>
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="right">
          <el-tabs>
            <el-tab-pane>
              <template #label>
                <div class="sub-title">
                  <div class="text">近日赛程</div>
                </div>
              </template>
              <div class="list">
                <ul>
                  <li v-for="i in 5" :key="i" class="list-item">
                      <div class="dot"></div>
                      <div class="title">【{{ 'xxxx' }}】</div>
                      <div class="date">[{{ '2020-11-17' }}]</div>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="Config">
              <template #label>
                <div class="sub-title">
                  <div class="text">最新动态</div>
                </div>
              </template>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <div class="topic-header">
      <div class="text">走进实验室</div>
    </div>
    <div class="section-2 w">
      <div class="span-1-2-col">
        <div class="left"></div>
        <div class="right">
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in 6" :key="item">
              <div class="item">{{ item }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">

.topic-header {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 20px 0;
  position: relative;

  &::after {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #55B8E4;
  }

  .text {
    color: #118099;
    font-size: 32px;
    font-weight: bold;
    line-height: 40px;
    height: 100%;
    background-color: #fff;
    padding-right: 18px;
    padding-left: 25px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

.sub-title {
  position: relative;
  padding-left: 20px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 100%;
    background-color: #099891;
  }

  .text {
    display: inline-block;
    line-height: 30px;
    color: #333;
    font-weight: bold;
    font-size: 20px;
  }
}

.w {
  width: 1400px;
  min-height: 50px;
  margin: 0 auto 50px;
  box-sizing: border-box;
  border: 1px solid;
}

.focus {
  border: 1px solid;

  .diagrams {
    display: flex;
    justify-content: space-around;
    padding: 30px 0;

    .item {
      .chart {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
      }

      .info {
        margin: 20px 0;
        text-align: center;

        .num {
          font-weight: bold;
        }
      }
    }
  }
}

.double-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;

  & > div {
    height: 400px;
  }

  .left .item {
    height: 100%;
    position: relative;

    .caption {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      box-sizing: border-box;
      padding: 8px 15px 0;
      color: white;
      background-color: rgba(0, 0, 0, .3);

      .title {
        font-size: 20px;
        font-weight: bold;
        line-height: 1.5;
      }

      .detail {
        font-size: 16px;
      }
    }
  }

  .right {
    overflow: hidden;

    .list {

      .list-item {
        display: flex;
        align-items: center;
        height: 69px;
        padding: 0 10px;
        border-bottom: 1px solid #333;
        font-size: 20px;
        box-sizing: border-box;

        &:last-child {
          border-bottom: none;
        }

        .dot {
          display: inline-block;
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: rgb(62, 168, 229);
        }

        .title {
          font-weight: 700;
          flex-grow: 1;
        }

        .date {
          text-align: center;
          line-height: 25px;
          margin-left: auto;
        }
      }
    }
  }
}

.span-1-2-col {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;

  & > div {
    border: 1px solid;
    height: 300px;
  }

  .right {
    grid-column: span 2;

    .item {
      background-color: gray;
      height: 300px;
    }
  }
}

</style>
